const boxes = document.querySelectorAll('.box')
window.addEventListener('scroll', checkBoxes)

checkBoxes()


function checkBoxes() {
    //获取页面4/5的高度
    const triggerBottom = window.innerHeight / 5 * 4;

    boxes.forEach(box => {
        //获取box元素顶部相对于页面头部的距离
        const boxTop = box.getBoundingClientRect().top

        if (boxTop < triggerBottom) {
            box.classList.add('show')
        } else {
            box.classList.remove('show')
        }
    })
}